<template>
  <div class="body" v-if="!initLoading">
    <div class="top-bg"></div>
    <div class="status-text">
      {{ orderRefundDetail.status.name }}
    </div>
    <div class="goods-main">
      <div class="goods-detail" catchtap="getGoods">
        <image
          class="goods-image"
          :src="orderRefundDetail.order_goods.goods_image"
          mode="aspectFill"
        ></image>
        <div class="goods-detail-info">
          <div class="goods-name">
            {{ orderRefundDetail.order_goods.goods_name }}
          </div>
          <div class="goods-attr">
            {{ orderRefundDetail.order_goods.goods_attr }}
          </div>
          <div class="attr">
            <div>x{{ orderRefundDetail.order_goods.total_num }}</div>
          </div>
        </div>
      </div>
      <div class="cell-item">
        <div class="text-grey">商品金额:</div>
        <money :value="orderRefundDetail.order_goods.total_price"></money>
      </div>
      <div class="cell-item">
        <div class="text-grey">订单实付金额:</div>
        <money :value="orderRefundDetail.order.pay_price"></money>
      </div>
    </div>

    <!-- 申请内容 -->
    <div class="apply-main">
      <div class="cell-item">
        <div class="text-grey">售后类型:</div>
        <div class="desc">{{ orderRefundDetail.type.name }}</div>
      </div>
      <div class="cell-item">
        <div class="text-grey">申请原因:</div>
        <div class="desc">{{ orderRefundDetail.apply_desc }}</div>
      </div>
      <div>
        <div class="text-grey">申请凭证:</div>
        <div class="apply-imgs">
          <template
            v-for="(item, index) in orderRefundDetail.imgs"
            :key="index"
          >
            <div class="img-item">
              <image
                class="img-image"
                :src="item"
                catchtap="predivImages"
                mode="aspectFill"
              ></image>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 售后信息 -->
    <temlate v-if="orderRefundDetail.status.value == 2">
      <div class="apply-refuse-main">
        <div class="">
          <div class="text-grey">拒绝原因：</div>
          <div class="mt10 text-red">{{ orderRefundDetail.refuse_desc }}</div>
        </div>
      </div>
    </temlate>

    <!-- 退款信息 -->
    <div
      class="refund-address-main"
      v-if="
        orderRefundDetail.type.value == 3 &&
        $utils.inArray(orderRefundDetail.status.value, [4]) &&
        orderRefundDetail.refund_time
      "
    >
      <div class="mt10 mb10">退款信息</div>
      <div class="cell-item">
        <div class="text-grey">退款金额:</div>
        <money :value="orderRefundDetail.refund_money"></money>
      </div>
      <div class="cell-item">
        <div class="text-grey">退款时间:</div>
        <div>{{ orderRefundDetail.refund_time }}</div>
      </div>
    </div>

    <!-- 商家收货地址 -->
    <div
      class="refund-address-main"
      v-if="
        $utils.inArray(orderRefundDetail.status.value, [3, 4]) &&
        orderRefundDetail.address
      "
    >
      <div class="mt10 mb10">平台退货仓库地址</div>
      <div class="cell-item">
        <div class="text-grey">收货人:</div>
        <div>{{ orderRefundDetail.address.name }}</div>
      </div>
      <div class="cell-item">
        <div class="text-grey">联系电话:</div>
        <div>{{ orderRefundDetail.address.phone }}</div>
      </div>
      <div class="cell-item">
        <div class="text-grey">详细地址:</div>
        <div>
          {{ orderRefundDetail.address.detail }}
        </div>
      </div>
      <div class="detail-address-row">
        <div>
          <div>· 未与卖家协商一致情况下，请勿寄到付或平邮</div>
        </div>
        <div>
          <div>· 请填写真实有效物流信息</div>
        </div>
      </div>
    </div>

    <!-- 自取无需操作 -->

    <temlate
      v-if="$utils.inArray(orderRefundDetail.type.value,[1,2]) && orderRefundDetail.delivery_type.value == 'slef_mention'"
    >
      <div class="delivery-shop-tips">
        <div>请前往取货门店进行退货</div>
        <div class="text-blue" v-if="orderRefundDetail.order.extract_shop_id" @click="onShopDetail">查看门店信息</div>
      </div>
    </temlate>

    <!-- 用户发货信息 -->
    <div
      class="refund-address-main"
      v-if="
        $utils.inArray(orderRefundDetail.status.value, [3, 4]) &&
        orderRefundDetail.delivery_type.value == 'express' &&
        orderRefundDetail.user_send_status
      "
    >
      <div class="mt10 mb10">用户退货物流信息</div>
      <div class="cell-item">
        <div class="text-grey">物流:</div>
        <div>{{ orderRefundDetail.user_express_company_name }}</div>
      </div>
      <div class="cell-item">
        <div class="text-grey">物流单号:</div>
        <div>{{ orderRefundDetail.user_express_no }}</div>
      </div>
      <div class="cell-item">
        <div class="text-grey">提交时间:</div>
        <div>
          {{ orderRefundDetail.user_send_time }}
        </div>
      </div>
    </div>

    <!-- 商家重新发货信息 -->
    <div
      class="refund-address-main"
      v-if="
        $utils.inArray(orderRefundDetail.status.value, [3, 4]) &&
        orderRefundDetail.delivery_type.value == 'express' &&
        orderRefundDetail.user_send_status &&
        orderRefundDetail.receipt_status &&
        orderRefundDetail.delivery_status
      "
    >
      <div class="mt10 mb10">商家重新物流信息</div>
      <div class="cell-item">
        <div class="text-grey">物流:</div>
        <div>{{ orderRefundDetail.express_company_name }}</div>
      </div>
      <div class="cell-item">
        <div class="text-grey">物流单号:</div>
        <div>{{ orderRefundDetail.express_no }}</div>
      </div>
      <div class="cell-item">
        <div class="text-grey">提交时间:</div>
        <div>
          {{ orderRefundDetail.send_time }}
        </div>
      </div>
    </div>

    <temlate
      v-if="
        orderRefundDetail.type.value != 3 &&
        orderRefundDetail.delivery_type.value == 'express'
      "
    >
      <!-- 填写物流信息 -->
      <temlate
        v-if="
          $utils.inArray(orderRefundDetail.status.value, [3]) &&
          !orderRefundDetail.user_send_status
        "
      >
        <div class="detail-express-main">
          <div class="item">
            <div class="title">物流公司:</div>
            <div class="desc">
              <picker
                mode="selector"
                @change="onExpressChange"
                :range="expressCompanyList"
                :value="expressCompanyList[expressIndex]?.id"
                range-key="company_name"
              >
                <div v-if="expressIndex > -1">
                  {{ expressCompanyList[expressIndex].company_name }}
                </div>
                <div v-else class="">请选择物流公司</div>
              </picker>
            </div>
            <div class="icon icon-yao-1"></div>
          </div>
          <div class="item">
            <div class="title">物流单号:</div>
            <div class="desc">
              <input placeholder="请填写物流单号" v-model="expressNo" />
            </div>
            <div class="icon icon-yao-1"></div>
          </div>
        </div>
        <hover>
          <div
            class="save-btn"
            @click="onDelivery"
            :style="[
              `background:${DIYTHEME?.host_bg}`,
              `color:${DIYTHEME?.host_color}`,
            ]"
          >
            确认发货
          </div>
        </hover>
      </temlate>
    </temlate>

    <div
      class="bottom-main"
      v-if="
        orderRefundDetail.delivery_status &&
        !orderRefundDetail.user_receipt_status
      "
    >
      <!-- 查看物流 -->
      <!-- 确认收货 -->
      <div @click="onReceipt" class="receipt-btn">确认收货</div>
    </div>
  </div>
  <init-load v-if="initLoading"></init-load>
</template>
<script setup lang="ts">
import {
  onLoad,
  onPageScroll,
  onPullDownRefresh,
  onReachBottom,
  onShow,
} from "@dcloudio/uni-app";
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
import {
  getOrderRefundDetail,
  getExpressCompanySelect,
  deliveryOrderRefund,
  receiptOrderRefund,
} from "@/api/order-refund";
import { Result, ResultError } from "@/types";
import { storeToRefs } from "pinia";
import { useConfig } from "@/store";
const { DIYTHEME } = storeToRefs(useConfig());

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const orderRefundId = ref<number>(0);

const orderRefundDetail = ref<any>({});

const toInit = () => {
  getOrderRefundDetail({
    id: orderRefundId.value,
  })
    .then((res: Result) => {
      orderRefundDetail.value = res.data.detail;
      initLoading.value = false;
      if (
        orderRefundDetail.value.status.value == 3 &&
        !orderRefundDetail.value.user_send_status
      ) {
        toInitExpressCompany();
      }
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const expressIndex = ref<number>(-1);

const expressNo = ref<string>("");

const expressCompanyList = ref<any>([]);

const toInitExpressCompany = () => {
  getExpressCompanySelect()
    .then((res: Result) => {
      expressCompanyList.value = res.data;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const onExpressChange = (e: any) => {
  nextTick(() => {
    expressIndex.value = Number(e.detail.value);
  });
};

const disable = ref<boolean>(false);

const onDelivery = () => {
  if (disable.value === true) {
    return false;
  }

  let obj = {
    user_express_id:
      expressIndex.value != -1
        ? expressCompanyList.value[expressIndex.value].id
        : 0,
    user_express_no: expressNo.value,
    order_refund_id: orderRefundId.value,
  };
  if (obj.user_express_id == 0 || obj.user_express_id == undefined) {
    $utils.errorMsg("请选择物流公司");
    return false;
  }
  if (obj.user_express_no == "") {
    $utils.errorMsg("请输入快递单号");
    return false;
  }
  deliveryOrderRefund(obj)
    .then((res: Result) => {
      toInit();
      $utils.successMsg(res);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

// 确定收货
const onReceipt = () => {
  uni.showModal({
    title: "友情提示",
    content: "确认已经收到货了吗？",
    success(o) {
      if (o.confirm) {
        receiptOrderRefund({
          id: orderRefundId.value,
        })
          .then((res: Result) => {
            $utils.successMsg(res.message);
            toInit();
          })
          .catch((err: ResultError) => {
            $utils.errorMsg(err);
          });
      }
    },
  });
};

const onShopDetail = () => {
  $utils.routeRedirectTo("/otherpages/shop/detail",{
    id:orderRefundDetail.value.order.extract_shop_id
  });
}

onLoad((options: any) => {
  orderRefundId.value = options.id || 0;
  toInit();
});
</script>


<style>
page {
  background: var(--base-page);
}
</style>
<style scoped>
.body {
  padding: 20rpx 20rpx 120rpx;
}
.status-text {
  height: 120rpx;
  line-height: 120rpx;
  margin-left: 20rpx;
  /* font-weight: bold; */
  color: red;
}
.apply-main,
.apply-refuse-main,
.goods-main,
.refund-address-main,
.delivery-shop-tips {
  width: calc(100% - 40rpx);
  margin: 20rpx auto 0;
  padding: 20rpx;
  background: #fff;
  border-radius: var(--base-radius-default);
}
.delivery-shop-tips{
  display: flex;
  justify-content: space-between;
}


.cell-item {
  line-height: 60rpx;
  display: flex;
  justify-content: space-between;
}
.goods-detail {
  margin: 20rpx 0;
  display: flex;
  justify-content: flex-start;
}
.goods-image {
  height: 160rpx;
  width: 160rpx;
  border-radius: 5rpx;
  margin-right: 20rpx;
}
.apply-imgs {
  display: inline;
}
.apply-imgs {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
}
.apply-main .img-item {
  height: 200rpx;
  width: 200rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid #f0f0f0;
  border-radius: 5rpx;
}
.apply-main .img-item .img-image {
  height: 180rpx;
  width: 180rpx;
  padding: 10rpx;
}
.detail-address-row {
  margin-top: 20rpx;
  border-top: 1rpx solid #f9f9f9;
  padding-top: 20rpx;
  color: #999;
  font-size: var(--base-size-small-x);
}

.detail-express-main {
  width: calc(100% - 40rpx);
  margin: 20rpx auto 0;
  padding: 30rpx 20rpx;
  background: #fff;
  border-radius: var(--base-radius-default);
}
.detail-express-main .item {
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-express-main .item .title {
  width: 20%;
}
.detail-express-main .item .desc {
  width: calc(100% - 70rpx);
  padding: 0 20rpx;
  text-align: right;
}
.detail-express-main .item .icon {
  width: 30rpx;
  text-align: right;
  font-size: var(--base-size-small-xx);
}
.save-btn {
  width: 100%;
  margin: 25rpx auto;
  text-align: center;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: var(--base-radius-default);
}

.bottom-main {
  display: flex;
  justify-content: flex-end;
  background: #fff;
  height: 100rpx;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  box-shadow: 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.1);
}

.receipt-btn {
  background: #f0f0f0;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: var(--base-radius-default);
  padding: 0 50rpx;
  margin: 20rpx 20rpx 20rpx 0;
  white-space: nowrap;
}
</style>